<template lang="">
    <div class="box" >
       <div class="box" ref="box"></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.echar()
    },
    methods: {
        echar() {
            let mychart = echarts.init(this.$refs.box)
            let option = {
                // 标题
                title: {
                    text: '新增确诊TOP10', //标题内容
                    textAlign: "center", // 是否居中
                    left: '50%',   //标题位置
                    // 文字样式
                    textStyle: {
                        color: '#fff'   //颜色
                    }
                },
                // x轴
                xAxis: {
                    type: 'category',    // 类目 
                    data: ['英国', '美国', '法国', '俄国', '乌克兰', '韩国', '日本','朝鲜','加拿大','新西兰'],  //data存放数据
                    // x轴的轴线设置
                    axisLine:{
                        show:false    // 是否显示
                    },
                    // x轴的刻度设置
                    axisTick:{
                        show:false   // 是否显示
                    }, 
                    // x轴的标签设置
                    axisLabel:{
                        color:'#FFF' 
                    },
                    // x轴的分割线设置
                    splitLine:{
                        show:true,
                        // 分割线的样式
                        lineStyle:{
                          color:'#192047'
                        }
                    }
                },
                // y轴
                yAxis: {
                    type: 'value',   //数值
                    // 标签样式
                    axisLabel:{
                        color:'#FFF'
                    },
                     // 分割线
                    splitLine:{
                        show:true,
                        lineStyle:{
                          color:'#192047'
                        }
                    }
                },
                // 网格
                grid:{
                   left:70,
                   top:45 ,
                   bottom:35
                },
                // 系列
                series:[
                    {
                        type:'bar',    // 类型 有 bar  柱状图  pie 饼状图  line 线型图
                        // 存放数据
                        data:[
                            {name:'英国',value:40000},
                            {name:'美国',value:38000},
                            {name:'法国',value:36000},
                            {name:'俄国',value:34000},
                            {name:'乌克兰',value:32000},
                            {name:'韩国',value:30000},
                            {name:'日本',value:28000},
                            {name:'朝鲜',value:26000},
                            {name:'加拿大',value:24000},
                            {name:'新西兰',value:22000},
                        ],
                        // 柱状图的宽
                        barWidth:15,
                        // 每条数据的样式
                        itemStyle:{
                            borderRadius:15,  // 圆角边框
                            color:'#2f89cf'
                            
                        }
                    }
                ]

            }
            mychart.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    width: 400px;
    height: 220px;
    // border: 1px solid #000;
}
</style>